<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <meta name="author" content="王鸿基">
        <title></title>
        <style>
            

    input[type=range] {   
      -webkit-appearance: none;   
      /*margin: 18px 0;   */
      width: 100%;   
    }   
    input[type=range]:focus {   
      outline: none;   
    }   
    input[type=range]::-webkit-slider-runnable-track {   
      /*width: 100%;   */
      height: 2px;   
      cursor: pointer;   
      /*animate: 0.2s;   */
      /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   */
      background: green;   
      /*border-radius: 1.3px;   */
      /*border: 0.2px solid #010101;   */
    }   
    input[type=range]::-webkit-slider-thumb {   
      /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   */
      /*border: 1px solid #000000;   */
      /*height: 36px;   */
      /*width: 16px;   */
      /*border-radius: 3px;   */
      /*background: #ffffff;   */
      /*cursor: pointer;   */
      -webkit-appearance: none;   
      margin-top: -7px;   
      border: 1px solid green;   
      height: 15px;   
      width: 15px;   
      border-radius: 8px;   
      background: green;   
      cursor: pointer;   
    }   
    input[type=range]:focus::-webkit-slider-runnable-track {   
      background: green;   
    }   
    input[type=range]::-moz-range-track {   
      width: 100%;   
      height: 2px;   
      cursor: pointer;   
      /*animate: 0.2s;   */
      /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   */
      background: green;   
      /*border-radius: 1.3px;   */
      /*border: 0.2px solid #010101;   */
    }   
    input[type=range]::-moz-range-thumb {   
      /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   */
      border: 1px solid green;   
      height: 15px;   
      width: 15px;   
      border-radius: 8px;   
      background: green;   
      cursor: pointer;   
    }   
    input[type=range]::-ms-track {   
      width: 100%;   
      height: 8.4px;   
      cursor: pointer;   
      animate: 0.2s;   
      background: transparent;   
      border-color: transparent;   
      border-width: 16px 0;   
      color: transparent;   
    }   
    input[type=range]::-ms-fill-lower {   
      background: #2a6495;   
      border: 0.2px solid #010101;   
      border-radius: 2.6px;   
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
    }   
    input[type=range]::-ms-fill-upper {   
      background: #3071a9;   
      border: 0.2px solid #010101;   
      border-radius: 2.6px;   
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
    }   
    input[type=range]::-ms-thumb {   
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
      border: 1px solid #000000;   
      height: 36px;   
      width: 16px;   
      border-radius: 3px;   
      background: #ffffff;   
      cursor: pointer;   
    }   
    input[type=range]:focus::-ms-fill-lower {   
      background: #3071a9;   
    }   
    input[type=range]:focus::-ms-fill-upper {   
      background: #367ebd;   
    }  


        </style>
    </head>
    <body>
        <input type="range" name="r" id="r" onchange="alert(this.value)">
    </body>
</html>